<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>更新页面</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <style>
        .selected_class{
            box-shadow: 3px 3px 6px rgba(85, 154, 227, 0.4);
            border: 2px solid #2d8cf0;
        }
        .ellipsis {
            overflow: hidden; /* 确保超出容器的文本被隐藏 */
            white-space: nowrap; /* 确保文本在一行内显示 */
            text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
        }
    </style>
</head>
<body>

<form class="layui-form">

    <div class="main-container mr-5">
        <div class="layui-form-item">
            <label class="layui-form-label required">模型风格</label>
            <div class="layui-input-block model_html"  style="display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;">
                <div class="model_click"  data-id="1" style="width: 100px;height: 120px;margin-right: 20px;">
                    <img src="https://ai-video-1320718644.cos.ap-guangzhou.myqcloud.com/video/local/stable_diffusion_image/20240513/png/0b52503b7725942befdf.png" style="width: 100px;height: 100px;">
                    <div>实打实大苏打</div>
                </div>
            </div>
            <input type="hidden" name="model" value="" lay-verify="required">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Lora</label>
            <div class="layui-input-block rola_html"  style="display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;">
                <div class="model_click"  data-id="1" style="width: 100px;height: 120px;margin-right: 20px;">
                    <img src="https://ai-video-1320718644.cos.ap-guangzhou.myqcloud.com/video/local/stable_diffusion_image/20240513/png/0b52503b7725942befdf.png" style="width: 100px;height: 100px;">
                    <div>实打实大苏打</div>
                </div>
            </div>
            <input type="hidden" name="rola" value="">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">描述词</label>
            <div class="layui-input-block">
                <input type="text" name="prompt" placeholder="" lay-verify="required" onblur="formatJsonAiCommand();" class="layui-input">
                <tip style="color: red;font-size: 12px;">@prompt 作为内容替换</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">反向描述词</label>
            <div class="layui-input-block">
                <input type="text" name="negative_prompt" placeholder="" onblur="formatJsonAiCommand();" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">采样器</label>
            <div class="layui-input-block">
                <div name="sampler" id="sampler" value="" ></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">scheduler</label>
            <div class="layui-input-block">
                <div name="scheduler" id="scheduler" value="" ></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">步长</label>
            <div class="layui-input-block">
                <input type="number" name="steps" placeholder="" lay-verify="required" onblur="formatJsonAiCommand();" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">VAE</label>
            <div class="layui-input-block">
                <input type="text" name="sd_vae" placeholder="" onblur="formatJsonAiCommand();" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否修脸</label>
            <div class="layui-input-block">
                <input type="radio" name="adetailer" value="0" title="否" lay-filter="adetailer" checked>
                <input type="radio" name="adetailer" value="1" title="是" lay-filter="adetailer" >
            </div>
        </div>
        <div style="display: flex;flex-direction: row;align-items: center">
            <div class="layui-form-item" style="width: 95%">
                <label class="layui-form-label">AI图像指令</label>
                <div class="layui-input-block">
                    <textarea name="ai_image_command" class="layui-textarea" rows="15" cols="100" disabled style="width: 100%"></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom" style="position:relative">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
                确认修改
            </button>
            <!--<button type="reset" class="pear-btn pear-btn-md">-->
            <!--重置-->
            <!--</button>-->
        </div>
    </div>

</form>

<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
<script src="/app/admin/admin/js/permission.js"></script>
<script src="/app/admin/admin/js/functions.js"></script>
<script src="/app/admin/admin/js/md5.js"></script>

<script>
    let ai_command_sampler_list = '<?=$ai_command_sampler_list?>';
    let ai_command_sampler_data = [];
    if(ai_command_sampler_list){
        ai_command_sampler_data = JSON.parse(ai_command_sampler_list);
    }
    let ai_command_scheduler_list = '<?=$ai_command_scheduler_list?>';
    let ai_command_scheduler_data=[];
    if(ai_command_scheduler_list){
        ai_command_scheduler_data = JSON.parse(ai_command_scheduler_list);
    }

    // 相关接口
    const AIIMAGE_COMMAND_API = "/app/admin/image/aiimagecommand/viewcommand";

    let ai_image_command_data = parent.layui.$('input[name="ai_image_command_data"]').val();
    let data = ai_image_command_data ? JSON.parse(decodeURIComponent(ai_image_command_data).replace(/\~/g,' ')) : [];
    //console.log(data)

    // 获取数据库记录
    layui.use(["form", "util", "popup"], function () {
        $ = layui.$;

        // 给表单初始化数据
        layui.each(data, function (key, value) {
            let obj = $('*[name="'+key+'"]');
            if (key === "password") {
                obj.attr("placeholder", "不更新密码请留空");
                return;
            }
            if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
            if (obj[0].nodeName.toLowerCase() === "textarea") {
                obj.val(value);
            } else if ($(obj[0]).attr('type') === "radio") {
                $('input[name="'+key+'"]').each(function (i,v) {
                    if(value==$(this).val()){
                        $(this).attr("checked","checked");
                    }else{
                        $(this).removeAttr("checked");
                    }
                })
            }  else {
                obj.attr("value", value);
                obj[0].value = value;
            }
        });

        layui.$.ajax({
            url: "/app/admin/image/index/select?limit=1000&status=1",
            dataType: "json",
            async:true,
            headers: get_header({"status":"1"}),
            success: function (res2) {
                let html = '';

                layui.$.each(res2.data,function (i,v) {
                    let selected = '';
                    if(v.model==data['model']){
                        selected = 'selected_class';
                    }
                    html += ' <div class="model_click '+selected+'" data-name="'+v.model+'" style="width: 100px;height: 120px;margin-right: 20px;">\n' +
                        '           <img src="'+v.image+'" style="width: 100px;height: 100px;" title="'+v.model+'">\n' +
                        '           <div class="ellipsis">'+v.name+'</div>\n' +
                        '  </div>';
                })
                layui.$('.model_html').html(html);
                if (res2.code) {
                    layui.popup.failure(res2.msg);
                }
            }
        });

        $('.model_html').delegate('.model_click','click',function () {
            $('.model_click').removeClass('selected_class');
            $(this).addClass('selected_class');
            $('input[name="model"]').val($(this).data('name'));
            //console.log($(this).data('id'));
            formatJsonAiCommand();
        })

        layui.$.ajax({
            url: "/app/admin/image/rola/select?limit=1000&status=1",
            dataType: "json",
            async:true,
            headers: get_header({"status":"1"}),
            success: function (res2) {
                let html = '';

                layui.$.each(res2.data,function (i,v) {
                    let selected = '';
                    if(v.name==data['rola']){
                        selected = 'selected_class';
                    }
                    html += ' <div class="rola_click '+selected+'" data-name="'+v.name+'" style="width: 100px;height: 120px;margin-right: 20px;">\n' +
                        '           <img src="'+v.image+'" style="width: 100px;height: 100px;" title="'+v.rola+'">\n' +
                        '           <div class="ellipsis">'+v.name+'</div>\n' +
                        '  </div>';
                })
                layui.$('.rola_html').html(html);
                if (res2.code) {
                    layui.popup.failure(res2.msg);
                }
            }
        });

        layui.$('.rola_html').delegate('.rola_click','click',function () {
            let selectRola = layui.$(this).data('name');
            let rola = layui.$('input[name="rola"]').val();
            let prompt = layui.$('input[name="prompt"]').val();
            if(rola){
                let roleVal = ",<lora:"+rola+":1>,";
                prompt = prompt.replace(roleVal,'');
            }

            if(rola!=selectRola) {
                layui.$('.rola_click').removeClass('selected_class');
                layui.$(this).addClass('selected_class');
                layui.$('input[name="rola"]').val(selectRola);

                if (prompt.indexOf('@prompt') == -1) {
                    prompt = '@prompt,' + prompt + ",<lora:" + selectRola + ":1>,";
                } else {
                    prompt += ",<lora:" + selectRola + ":1>,";
                }
            }else{
                layui.$('.rola_click').removeClass('selected_class');
                layui.$('input[name="rola"]').val('');
            }
            layui.$('input[name="prompt"]').val(prompt);
            formatJsonAiCommand();
        })

        // 字段 状态 sampler
        layui.use(["jquery", "xmSelect"], function() {
            let value = layui.$("#sampler").attr("value");
            let initValue = value ? value.split(",") : ['DPM++ 2M SDE'];
            let ai_command_samplers = [];
            layui.$.each(ai_command_sampler_data,function (i,v) {
                ai_command_samplers.push({"name":v,"value":v});
            })
            layui.xmSelect.render({
                el: "#sampler",
                name: "sampler",
                filterable: true,
                initValue: initValue,
                data: ai_command_samplers,
                model: {"icon":"hidden","label":{"type":"text"}},
                clickClose: true,
                radio: true,
                on: function (data) {
                    //arr:  当前多选已选中的数据
                    let sampler = data.arr[0]['value'];
                    layui.$("#sampler").attr("value",sampler);
                    //layui.$('input[name="sampler"]').val(sampler)
                    formatJsonAiCommand()
                }
            })
        });

        // 字段 状态 scheduler
        layui.use(["jquery", "xmSelect"], function() {
            let value = layui.$("#scheduler").attr("value");
            let initValue = value ? value.split(",") : ['Karras'];
            let ai_command_schedulers = [];
            layui.$.each(ai_command_scheduler_data,function (i,v) {
                ai_command_schedulers.push({"name":v,"value":v});
            })
            layui.xmSelect.render({
                el: "#scheduler",
                name: "scheduler",
                filterable: true,
                initValue: initValue,
                data: ai_command_schedulers,
                model: {"icon":"hidden","label":{"type":"text"}},
                clickClose: true,
                radio: true,
                on: function (data) {
                    //arr:  当前多选已选中的数据
                    let scheduler = data.arr[0]['value'];
                    layui.$("#scheduler").attr("value",scheduler);
                    //layui.$('input[name="scheduler"]').val(scheduler)
                    formatJsonAiCommand()
                }
            })
            layui.$('input[name="sampler"]').val();
        });

        layui.form.on('radio(adetailer)', function(data){
            formatJsonAiCommand()
        });

        formatJsonAiCommand();

        layui.form.render();
    });

    //提交事件
    layui.use(["form", "popup"], function () {
        layui.form.on("submit(save)", function (data) {
            if(data.field.steps==false){
                layer.msg('步长不能为0');
                return false;
            }
            if(data.field.sampler==false){
                layer.msg('采样器必选');
                return false;
            }
            formatJsonAiCommand();
            parent.layui.$('input[name="ai_image_command_data"]').val(encodeURIComponent(JSON.stringify(data.field).replace(/ /g,'~')));
            parent.layui.$('textarea[name="ai_image_command"]').val(layui.$('textarea[name="ai_image_command"]').val());
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });

        return false;
    });
    function formatJsonAiCommand(){
        let param = {};

        param.model = layui.$('input[name="model"]').val();
        param.rola = layui.$('input[name="rola"]').val();
        param.prompt = layui.$('input[name="prompt"]').val();
        param.negative_prompt = layui.$('input[name="negative_prompt"]').val();
        param.sampler = layui.$("#sampler").attr("value");
        param.scheduler = layui.$("#scheduler").attr("value");
        param.steps = layui.$('input[name="steps"]').val();
        param.sd_vae = layui.$('input[name="sd_vae"]').val();
        param.adetailer = layui.$('input[name="adetailer"]:checked').val();
        let loading = layer.load();
        layui.$.ajax({
            url: AIIMAGE_COMMAND_API,
            type: "POST",
            dateType: "json",
            data: param,
            async:false,
            headers: get_header(param),
            success: function (res) {
                layer.close(loading);
                if (res.code) {
                    return layui.popup.failure(res.msg);
                }

                layui.$('textarea[name="ai_image_command"]').val(res.data['ai_image_command']);
            }
        });
    }
</script>

</body>

</html>
